<template>
  <div class="about-container">
    <h2>关于系统</h2>

    <!-- 系统简介 -->
    <el-card class="section-card" shadow="never">
      <div slot="header">
        <span>系统简介</span>
      </div>
      <p>本系统为校园宿舍管理提供信息化支持，涵盖宿舍信息维护、学生分配、水电费管理等功能。</p>
      <p>旨在提高宿舍管理效率，优化资源配置，提升用户体验。</p>
    </el-card>

    <!-- 版本信息 -->
    <el-card class="section-card" shadow="never">
      <div slot="header">
        <span>版本信息</span>
      </div>
      <p><strong>当前版本：</strong>v1.0.0</p>
      <p><strong>发布日期：</strong>2025年4月5日</p>
    </el-card>

    <!-- 开发者信111息 -->
    <el-card class="section-card" shadow="never">
      <div slot="header">
        <span>开发者信息</span>
      </div>
      <el-table :data="developers" border>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column prop="contact" label="联系方式"></el-table-column>
      </el-table>
    </el-card>

    <!-- 使用的技术栈 1111-->
    <el-card class="section-card" shadow="never">
      <div slot="header">
        <span>使用的技术栈</span>
      </div>
      <ul>
        <li>前端：Vue.js + Element UI</li>
        <li>后端（可选）：Node.js / Spring Boot / Django</li>
        <li>数据库：MySQL / MongoDB / JSON 模拟数据</li>
        <li>构建工具：Webpack / Vite</li>
      </ul>
    </el-card>

    <!-- 更新日志 -->
    <el-card class="section-card" shadow="never">
      <div slot="header">
        <span>更新日志</span>
      </div>
      <el-timeline>
        <el-timeline-item timestamp="2025-04-05" placement="top">
          <el-card>
            <h4>v1.0.0 正式发布</h4>
            <p>完成基础功能开发，包含宿舍管理、学生分配、水电费管理等模块。</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2025-03-28" placement="top">
          <el-card>
            <h4>v0.9.0 内测版</h4>
            <p>实现宿舍分配模块与基本数据展示功能。</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <!-- 联系方式 -->
    <el-card class="section-card" shadow="never">
      <div slot="header">
        <span>联系方式</span>
      </div>
      <p>Email: admin@example.com</p>
      <p>GitHub: <a href="https://github.com/your-repo" target="_blank">https://github.com/your-repo</a></p>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      developers: [
        { name: '张三', role: '前端开发', contact: 'zhangsan@example.com' },
        { name: '李四', role: '后端开发', contact: 'lisi@example.com' },
        { name: '王五', role: 'UI 设计', contact: 'wangwu@example.com' }
      ]
    }
  }
}
</script>

<style scoped>
.about-container {
  padding: 20px;
}

.section-card {
  margin-bottom: 20px;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
}

a {
  color: #409EFF;
  text-decoration: none;
}
</style>